import React, { Component } from 'react';
import ThePagination from "@/components/ThePagination";
import { Form, Input, Select, Space, Button, DatePicker, Modal, message } from "antd";
import { SearchOutlined,ExclamationCircleOutlined } from "@ant-design/icons";
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import {apiGetstockPurchasePage,apiStockPurchaseDelet} from "@/request/procurement"
import {apiStockTakeListAddBefore} from '@/request/storageManager/stock.js'
import store from "@/store/store"
import TheQueryForm from '../../../components/TheQueryForm';
import TheTableExtend from '@/components/TheTableExtend'

export default class ProcurementList extends Component {
    constructor() {
        super()
        this.formRef_code = React.createRef()
        this.queryFormRef = React.createRef()
        this.state = {
            columns: [
                {
                    title: "序号",
                    dataIndex: "index",
                    key: "index",
                    render:(text,record,index) =>{
                        return((this.state.pageData.pageNo - 1)*(this.state.pageData.pageSize) + (index + 1));
                    }
                },
                {
                    title: "采购单号",
                    dataIndex: "code",
                    key: "code",
                    render: (text, render) => {
                        return text
                    }
                },
                {
                    title: "供应商",
                    dataIndex: "supplierName",
                    key: "supplierName",
                    render: (text, render) => {
                        return text
                    }
                },
                {
                    title: "仓库",
                    dataIndex: "libraryName",
                    key: "libraryName",
                    render: (text, render) => {
                        return text
                    }
                },
                {
                    title: "是否委外仓",
                    dataIndex: "isOutsource",
                    key: "isOutsource",
                    render: (text, render) => {
                        return text ? '否' : '是'
                    }
                },
                // {
                //     title: "商品总价值",
                //     dataIndex: "serviceShowFile",
                //     key: "serviceShowFile",
                //     render: (text, render) => {
                //         return text
                //     }
                // },
                {
                    title: "创建人",
                    dataIndex: "memberName",
                    key: "memberName",
                    render: (text, render) => {
                        return text
                    }
                },
                {
                    title: "创建时间",
                    dataIndex: "createTime",
                    key: "createTime",
                    render: (text, render) => {
                        return text
                    }
                },
                {
                    title: "订单状态",
                    dataIndex: "status",
                    key: "status",
                    render: (text, render) => {
                        let status = ""
                        switch (text) {
                            case 0:
                                status =<div style={{color:"red"}} >未完成</div>
                                break;
                            case 1:
                                status =<div style={{color:"orange"}} >处理中</div>
                                break;
                            case 2:
                                status ="已完成"
                                break;
                            default:
                                break;
                        }
                        return status
                    }
                },
                {
                    title: "操作",
                    dataIndex: "serviceShowFile",
                    key: "serviceShowFile",
                    render: (text, render) => {
                        return <div>
                            <TheButton haspermi={['procurement:warehouse:detail']}  onClick={()=>this.props.history.push('/procurement/warehouse/details/'+render.id)}>查看详情</TheButton>
                            {/* <TheButton haspermi={['procurement:list:delet']}
                            onClick = {()=>this.deleteProcurementOrder(render.id,render.code)}
                            >删除</TheButton> */}
                        </div>
                    }
                },
            ],
            dataSource: [],
            pageData: {
                pageNo: 1,
                pageSize: 10
            },
            total: 0,
            code:"",
            form_show: true,
            NewColumns: [],
            searchOption: [
                { field: 'goodsName', label: '物料名称', placeholder: '请输入', required: false, rules: [], type: 'Input', defaultValue: '' },
                { field: 'code', label: '采购单号', placeholder: '请输入', required: false, rules: [], type: 'Input', defaultValue: '' },
                { field: 'libraryId', label: '仓库', placeholder: '请选择', required: false, rules: [], type: 'Select',txt: 'name', value: 'id', options: [] },
                { field: 'supplierName', label: '供应商', placeholder: '请输入', required: false, rules: [], type: 'Input', defaultValue: '' },
                { field: 'skuNo', label: '物料ID', placeholder: '请输入', required: false, rules: [], type: 'Input', defaultValue: '' },
                { field: 'status', label: '订单状态', placeholder: '请选择', required: false, rules: [], type: 'Select', options: [{label:"处理中",value:"1"},{label:"已完成",value:"2"}] },
            ],
            queryForm: {

            },
        }
    }
    componentDidMount() {
        this.onColumnsFilter(this.state.columns)
        this.getLibrarys()
        let searchParams = store.getState().searchValue
        let { pageNo, pageSize, queryForm, pathName } = searchParams
        if (searchParams && pageNo&&pathName=='warehouse') {
            this.setState({
                queryForm,
                pageData: {
                    pageNo: pageNo, pageSize: pageSize
                }
            }, () => {
                this.queryFormRef.onSetDefault({ ...queryForm })
                this.getData()
            })
        } else {
            this.getData()
        }
    }
    onColumnsFilter = (value) => {
        this.setState({
            NewColumns: value
        })
    }
    onTableRefresh() {
        this.getData()
    }
    async getLibrarys() {
        let res = await apiStockTakeListAddBefore()
        if (res.code === 0) {
            console.log(res.data.librarys);
            this.state.searchOption[2].options = res.data.librarys
            this.setState({
                searchOption: this.state.searchOption
            })
        }
    }
    getData = async (values)=>{
        let { pageNo, pageSize } = this.state.pageData
        this.setState({
            queryForm: values === undefined ? this.state.queryForm : { ...values }
        },async ()=>{
            const params = {
                pageNo, pageSize, queryForm: this.state.queryForm
            }
            store.dispatch({
                type: 'SaveSearchValues',
                data: {
                    pathName:'warehouse',
                    ...params
                }
            })
            let res = await apiGetstockPurchasePage({
                type:1,pageNo, pageSize, ...this.state.queryForm
            })
            if(res.code === 0){
                this.setState({
                    dataSource:res.data,
                    total: res.totalCount,
                })
            }
        })
    }
    deleteProcurementOrder = (id,code) => {
        console.log(id);
        Modal.confirm({
            title: '提示',
            icon: <ExclamationCircleOutlined />,
            content: `即将删除单号为：${code}采购单`+'删除后不可恢复，是否确定删除？',
            okText: '确认',
            cancelText: '取消',
            onOk: async () => {
                let res = await apiStockPurchaseDelet({id:id})
                if(res.code === 0){
                    message.info("删除成功")
                    this.getData()
                }
            }
        })
    }
    pageChange = (pageNo, pageSize) => {
        this.setState({
            pageData: {
                pageNo, pageSize
            }
        }, () => {
            this.getData()
        })
    };
    resetSearch() {
        this.formRef_code.current.setFieldsValue({
            code: ''
        })
        this.onFinish()
    }
    onFinish() {
        let values = this.formRef_code.current.getFieldsValue()
        console.log(values);
        this.setState({
            code: values.code
        }, () => {
            this.pageChange(1, 10)
        })
    }
    onFormSearch(values){
        this.setState({
            pageData:{pageNo:1,pageSize:10}
        },()=>{
            this.getData(values)
        })
    }
    onReset() {
        this.setState({
            queryForm: {},
            pageData: {
                pageNo: 1,
                pageSize: 10
            },
        },()=>{
            this.getData()
        })
    }
    render() {
        let { columns, dataSource, pageData, total,NewColumns,form_show, searchOption } = this.state
        return (
            <div className="p-layout-box commodity-examine">
                {/*<Form layout={'inline'} ref={this.formRef_code} onFinish={()=>{this.onFinish()}} style={{marginBottom:12}}>*/}
                {/*    <Form.Item name={"code"}>*/}
                {/*        <Input style={{ width: 140 }} suffix={<SearchOutlined />} placeholder={"采购单号"} />*/}
                {/*    </Form.Item>*/}

                {/*    <Form.Item>*/}
                {/*        <Space size="small" style={{ marginLeft: 10 }}>*/}
                {/*            <Button type="primary" htmlType="submit">*/}
                {/*                查询*/}
                {/*            </Button>*/}
                {/*            <Button onClick={() => this.resetSearch()} >重置</Button>*/}
                {/*        </Space>*/}
                {/*    </Form.Item>*/}
                {/*</Form>*/}
                <TheQueryForm ref={(ref) => this.queryFormRef = ref} show={form_show} option={searchOption} onGetValues={(values) => this.onFormSearch(values)} onReset={()=>{this.onReset()}}>
                </TheQueryForm>
                <TheTableExtend
                    columns={columns}
                    onFormTrigger={() => this.setState({ form_show: !this.state.form_show })}
                    onTableRefresh={() => this.onTableRefresh()}
                    onColumnsFilter={(value) => {this.onColumnsFilter(value)}}
                >
                </TheTableExtend>
                <TheTable
                    scroll={{ x: "max-content", y: '63vh' }}
                    columns={columns}
                    dataSource={dataSource}
                />
                <ThePagination
                    pageNo={pageData.pageNo}
                    pageSize={pageData.pageSize}
                    total={total}
                    pageChange={this.pageChange}
                />
            </div>
        );
    }
}
